<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<!--RichFaces tag library declaration -->
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<html>
<head>
<title>TreeAdaptor Test</title>

 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>

<link rel="stylesheet" href="codemirror.css"/>
<script src="codemirror.js"></script>
<script src="xml.js"></script>

<script>
function copy(value) {
 if(window.clipboardData) {
   window.clipboardData.clearData();
   window.clipboardData.setData("Text", value);
 } 
}
function paste() {
 if(window.clipboardData) {   
   return window.clipboardData.getData("Text");
 } 
}
function formatXml(xml) {
        var reg = /(>)\s*(<)(\/*)/g;
        var wsexp = / *(.*) +\n/g;
        var contexp = /(<.+>)(.+\n)/g;
        xml = xml.replace(reg, '$1\n$2$3').replace(wsexp, '$1\n').replace(contexp, '$1\n$2');
        var pad = 0;
        var formatted = '';
        var lines = xml.split('\n');
        var indent = 0;
        var lastType = 'other';
        // 4 types of tags - single, closing, opening, other (text, doctype, comment) - 4*4 = 16 transitions 
        var transitions = {
            'single->single': 0,
            'single->closing': -1,
            'single->opening': 0,
            'single->other': 0,
            'closing->single': 0,
            'closing->closing': -1,
            'closing->opening': 0,
            'closing->other': 0,
            'opening->single': 1,
            'opening->closing': 0,
            'opening->opening': 1,
            'opening->other': 1,
            'other->single': 0,
            'other->closing': -1,
            'other->opening': 0,
            'other->other': 0
        };

        for (var i = 0; i < lines.length; i++) {
            var ln = lines[i];
            var single = Boolean(ln.match(/<.+\/>/)); // is this line a single tag? ex. <br />
            var closing = Boolean(ln.match(/<\/.+>/)); // is this a closing tag? ex. </a>
            var opening = Boolean(ln.match(/<[^!].*>/)); // is this even a tag (that's not <!something>)
            var type = single ? 'single' : closing ? 'closing' : opening ? 'opening' : 'other';
            var fromTo = lastType + '->' + type;
            lastType = type;
            var padding = '';

            indent += transitions[fromTo];
            for (var j = 0; j < indent; j++) {
                padding += '\t';
            }
            if (fromTo == 'opening->closing')
                formatted = formatted.substr(0, formatted.length - 1) + ln + '\n'; // substr removes line break (\n) from prev loop
            else
                formatted += padding + ln + '\n';
        }

        return formatted;
    };


function format(cm) {
	cm.setValue(formatXml(cm.getValue()));
}

function initEditor(textElementId){
	var cm  = CodeMirror.fromTextArea(document.getElementById(textElementId));
	cm.setOption('lineNumbers',true);
	return cm;
}

</script>

</head>
<body>
    <h1>Hello, world!</h1>

	<f:view>
		<rich:panel id="collapsible" style="display:inline">
			<a4j:form id="frmClient" onsubmit="">
				<div style="float:left;width:200px;margin-right:5px;">
					<h:selectOneListbox	 id="lbxTemplates" style="width:200px" onchange="cmIn.setValue(value)" size="13" readonly="true">
						<f:selectItem/>
						<f:selectItems value="#{wsClientBean.samples}" />
					</h:selectOneListbox><br/>
					<a4j:commandButton id="clkCopy" style="width:100px" value="Copy" onclick="copy(cmIn.getValue())"/>
					<a4j:commandButton id="clkPaste" style="width:100px" value="Paste" onclick="cmIn.setValue(paste())"/><br/>
					<a4j:commandButton id="clkFormat" style="width:200px" value="Format" onclick="format(cmIn)" accesskey="f" title="shift+alt+f"/><br/>
	 				<h:selectOneListbox id="lbxEndpoints" label="Endpoints" value="#{wsClientBean.endpoint}" style="width:120px;float:left">
	 					<f:selectItems value="#{wsClientBean.listEndpoints()}" />
					</h:selectOneListbox>&nbsp;					
 					<a4j:commandButton  id="cbtSubmit" style="width:70px;color:white;background-color:black" type="submit" value="Submit" accesskey="s" title="alt+s" action="#{wsClientBean.call()}" onclick="cmIn.save();cmOut.toTextArea();" reRender="txtResponse" oncomplete="cmOut=initEditor('frmClient:txtResponse');format(cmOut);"/>
				</div>
				<h:inputTextarea id="txtRequest" value="#{wsClientBean.template}"/>
				<hr/>
				<h:inputTextarea id="txtResponse" value="#{wsClientBean.response}" readonly="true" onfocus=""/>
				<p/>
			</a4j:form>
		</rich:panel>

	</f:view>
	<script type="text/javascript">
		var cmIn  = initEditor('frmClient:txtRequest');
		var cmOut = initEditor('frmClient:txtResponse');
	</script>

	<!-- Bootstrap core JavaScript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="jquery.1.11.0.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="bootstrap/js/docs.min.js"></script>
</body>
</html>